<template>
  <div class="add">
    <el-card>
      <!-- 提示 -->
      <el-alert
        title="添加商品信息"
        type="info"
        show-icon
        :closable="false"
        center
      >
      </el-alert>
      <!-- 进度 -->
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 标签页 -->
      <el-tabs tab-position="left">
        <el-tab-pane label="基本信息">
          <el-form>
            <el-form-item prop="roleName" label="商品名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item prop="roleName" label="商品价格">
              <el-input></el-input>
            </el-form-item>
            <el-form-item prop="roleName" label="商品重量">
              <el-input></el-input>
            </el-form-item>
            <el-form-item prop="roleName" label="商品数量">
              <el-input></el-input>
            </el-form-item>
            <el-form-item prop="roleName" label="商品分类">
              <!-- <el-select placeholder="请选择角色">
                <el-option></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数">配置管理</el-tab-pane>
        <el-tab-pane label="商品属性">角色管理</el-tab-pane>
        <el-tab-pane label="商品图片">定时任务补偿</el-tab-pane>
        <el-tab-pane label="商品内容">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
        ],
        goods_price: [
          { required: true, message: "请输入价格", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
        goods_number: [
          { required: true, message: "请输入数量", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
        goods_cat: [
          { required: true, message: "请输入分类", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
        goods_weight: [
          { required: true, message: "请输入重量", trigger: "blur" },
          {
            min: 1,
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>
<style lang="less" scoped>
</style>